<script setup>
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
import chinaJSON from './china.json'

const map = ref()

// 注册中国地图
echarts.registerMap('china', chinaJSON)

const planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z'

onMounted(() => {
  let myChart = echarts.init(map.value)
  // 设置配置项
  myChart.setOption({
    // 地图组件
    geo: {
      map: 'china', // 中国地图
      // 是否开启鼠标缩放效果
      roam: false,
      zoom: 1.3, // 地图缩放倍率
      // 地图的位置的调试 left right top bottom
      top: 200,
      // 地图上文字的设置
      label: {
        show: true, // 文字显示
        color: 'white',
        fontSize: 12
      },
      // 每一个多边形的样式
      itemStyle: {
        // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0, color: '#013585' // 0% 处的颜色
          }, {
            offset: 1, color: '#04224b' // 100% 处的颜色
          }],
          global: false // 缺省为 false
        },
        borderColor: '#3a8baf',
        // shadowBlur 配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
        shadowColor: 'rgba(26, 119, 164, .2)',
        shadowBlur: 20,
        shadowOffsetX: 5,
        shadowOffsetY: 10
      },
      // 高亮状态下样式设置
      emphasis: {
        // 高亮文字效果
        label: {
          color: 'white',
          fontSize: 12
        },
        // 高亮图块样式
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#003881' // 0% 处的颜色
            }, {
              offset: 1, color: '#1e80a9' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          },
          borderColor: '#3a8baf'
        }
      }
    },
    // 布局位置
    grid: {
      top: 0,
      right: 0,
      bottom: 0,
      left: 0
    },
    series: [
      {
        type: 'lines', // 航线的系列
        data: [
          {
            coords: [
              [87.617733, 43.792818], // 起点
              [104.065735, 30.659462], // 终点
            ],
          },
          {
            coords: [
              [104.065735, 30.659462], // 起点
              [87.617733, 43.792818], // 终点
            ],
          },
          {
            coords: [
              [104.065735, 30.659462], // 起点
              [116.405285, 39.904989], // 终点
            ],
          },
          {
            coords: [
              [116.405285, 39.904989], // 起点
              [104.065735, 30.659462], // 终点
            ],
          },
          {
            coords: [
              [116.405285, 39.904989], // 起点
              [121.472644, 31.231706], // 终点
            ],
          },
          {
            coords: [
              [121.472644, 31.231706], // 起点
              [116.405285, 39.904989], // 终点
            ],
          },
          {
            coords: [
              [116.405285, 39.904989], // 起点
              [113.280637, 23.125178], // 终点
            ],
          },
          {
            coords: [
              [113.280637, 23.125178], // 起点
              [116.405285, 39.904989], // 终点
            ],
          },
        ],
        symbol: ['none', 'arrow'],
        symbolSize: 10,
        effect: {
          show: true,
          period: 6,
          trailLength: 0,
          symbol: planePath,
          symbolSize: 15
        },
        lineStyle: {
          color: 'white',
          type: 'dashed',
          width: 1,
          opacity: 0.6,
          curveness: 0.2
        }
      }
    ]
  })
})
</script>

<template>
  <div class="box3" ref="map">
    
  </div>
</template>

<style scoped>

</style>
